<template>
    <Form ref="formCustom" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="login_name">
            <Input v-model="form.login_name" placeholder="输入手机号">
        <span slot="prepend">
          <Icon :size="16" type="ios-unlock-outline"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="company_name">
            <Input v-model="form.company_name" placeholder="公司名称">
        <span slot="prepend">
          <Icon :size="16" type="logo-linkedin"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="industry">
            <Input v-model="form.industry" placeholder="行业">
        <span slot="prepend">
          <Icon :size="16" type="ios-leaf-outline"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="main_product">
            <Input v-model="form.main_product" placeholder="主营产品">
        <span slot="prepend">
          <Icon :size="16" type="logo-pinterest"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="address">
            <Input v-model="form.address" placeholder="公司所在地">
        <span slot="prepend">
          <Icon :size="16" type="md-code-working"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem prop="passwdCheck">
            <Input type="password" v-model="form.passwdCheck" placeholder="确认密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem class="m-b-0">
            <Row>
                <Col span="11">
                    <FormItem prop="code">
                        <Input type="text" v-model="form.code" placeholder="图片验证码">
                            <span slot="prepend">
                              <Icon :size="14" type="ios-construct"></Icon>
                            </span>
                        </Input>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                    <FormItem prop="time">
                        <img class="register-verify" ref="imgCode" src="/wl/user/verify"
                             onclick="this.src+='?' + Math.random();"/>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>

        <FormItem>
            <Row>
                <Col span="12">
                    <FormItem prop="mobile">
                        <Input type="number" v-model="form.login_name" disabled="" placeholder="手机号">
                            <span slot="prepend">
                              <Icon :size="14" type="ios-call"></Icon>
                            </span>
                        </Input>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="8">
                    <FormItem>
                        <Button type="primary" @click="sendMsg" :disabled="buttonDisable">{{ buttonTitle }}</Button>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>

        <FormItem prop="msgCode">
            <Input type="text" v-model="form.msgCode" placeholder="短信验证码">
        <span slot="prepend">
          <Icon :size="14" type="md-cash"></Icon>
        </span>
            </Input>
        </FormItem>

        <FormItem>
            <Button @click="handleSubmit" type="primary" long class="reg-btn" :loading="loading">注册</Button>
        </FormItem>
    </Form>
</template>
<script>
import { checkAcount, registerUser, sendMsg } from '@/api/user'

export default {
  name: 'RegisterForm',
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码谢谢'))
      } else {
        if (this.form.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请在输入相同密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致!'))
      } else {
        callback()
      }
    }
    const validateAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能空'))
      }
      // TODO 模拟异步验证效果-需要验证账号
      checkAcount(value).then(ret => {
        if (ret.data.errcode !== 1001) {
          callback(new Error(ret.data.errmsg))
        } else {
          callback()
        }
      })
    }
    return {
      form: {
        login_name: '',
        company_name: '',
        industry: '',
        address: '',
        main_product: '',
        password: '',
        passwdCheck: '',
        code: '',
        mobile: '',
        msgCode: ''
      },
      rules: {
        login_name: { validator: validateAccount, trigger: 'blur' },
        password: { validator: validatePass, trigger: 'blur' },
        passwdCheck: { validator: validatePassCheck, trigger: 'blur' },
        company_name: [
          { required: true, message: '请输入公司名称', trigger: 'change' }
        ],
        industry: [
          { required: true, message: '请输入行业', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'change' }
        ],
        main_product: [
          { required: true, message: '请输入主营产品', trigger: 'change' }
        ],
        msgCode: [
          { required: true, message: '输入短信验证码', trigger: 'change' }
        ]
      },
      runTime: 0,
      buttonDisable: false,
      buttonTitle: '发送验证码',
      loading: false
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.formCustom.validate((valid) => {
        if (valid) {
          this.form.mobile = this.form.login_name
          this.loading = true
          registerUser(this.form).then(ret => {
            this.loading = false
            if (ret.data.errcode === 1001) {
              this.$Message.success('恭喜您注册成功，请登录')
              this.form.mobile = this.form.login_name
              this.$emit('on-success-valid', this.form)
            } else {
              this.$Message.error(ret.data.errmsg)
            }
          })
        }
      })
    },
    sendMsg () {
      let mobile = this.form.login_name
      let code = this.form.code
      if (mobile === '') {
        this.$Message.error('请输入手机号')
        return false
      }
      if (code === '') {
        this.$Message.error('请输入图片验证码')
        return false
      }
      this.sendMobileCode(mobile, code)
    },
    sendMobileCode (mobile, code) {
      sendMsg(mobile, code).then(ret => {
        if (ret.data.errcode === 1001) {
          this.buttonRun()
        } else if (ret.data.errcode === 1020) {
          this.$refs.imgCode.click()
          this.$Message.error('图片验证码错误！')
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    buttonRun () {
      this.runTime = 60
    }
  },
  mounted () {
    let _this = this
    setInterval(function () {
      if (_this.runTime > 0) {
        console.log(_this.runTime)
        _this.runTime -= 1
        _this.buttonTitle = '发送验证码(' + _this.runTime + ')'
        _this.buttonDisable = true
      } else {
        _this.buttonTitle = '发送验证码'
        _this.buttonDisable = false
      }
    }, 1000)
  }
}
</script>
<style scoped>
    .register-verify {
        width: 100%;
    }

    /*.reg-btn{*/
    /*    background-color: #6a3ba2;*/
    /*    border-color: #6a3ba2;*/
    /*}*/
    /*.reg-btn:hover{*/
    /*    background-color: #8f53e0;*/
    /*    border-color: #6a3ba2;*/
    /*}*/
</style>
